<template>
  <Page class="LoginPage">
    <view class="LoginBody">
      <u-form :model="form" ref="uForm" class="Form" label-width="0">
        <u-form-item
          prop="name"
          left-icon="account"
          :left-icon-style="getIconStyle()"
          :border-bottom="false"
        >
          <u-input v-model="form.name" class="Input" />
        </u-form-item>
        <u-form-item
          prop="password"
          left-icon="lock"
          :left-icon-style="getIconStyle()"
          :border-bottom="false"
        >
          <u-input v-model="form.password" type="password" class="Input" />
        </u-form-item>
      </u-form>
      <u-button
        type="primary"
        class="btnLogin"
        @click="btnLoginClickHandler"
        :loading="loading"
      >
        登录
      </u-button>
    </view>
  </Page>
</template>
<script lang="ts">
import Page from '@/components/page/Page.vue';
import LoginService from '@/service/LoginService';
import PageUtil from '@/utils/PageUtil';
import ProjectUtil from '@/utils/ProjectUtil';
import Vue from '@/utils/Vue';

interface IData {
  form: {
    name: string;
    password: string;
  };
  formRules: any;
  loading: boolean;
}

export default Vue.extend({
  data(): IData {
    return {
      loading: false,
      form: {
        name: '',
        password: '',
      },
      formRules: {
        name: {
          required: true,
          message: '请输入姓名',
        },
        password: {
          required: true,
          message: '请输入密码',
        },
      },
    };
  },
  components: { Page },
  props: {},
  mounted() {
    this.getForm().setRules(this.formRules);
  },
  methods: {
    getForm(): any {
      return this.$refs.uForm;
    },
    getIconStyle() {
      return {
        color: '#2f83ff',
      };
    },

    btnLoginClickHandler() {
      this.getForm().validate((valid: boolean) => {
        if (valid) {
          this.loading = true;
          LoginService.login(this.form.name, this.form.password)
            .then(() => {
              PageUtil.openIndex();
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          ProjectUtil.showErrorToast('请检查输入');
        }
      });
    },
  },
});
</script>
<style lang="less" scoped>
.LoginPage {
  background: white;
  .LoginBody {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    transform: translateY(-50%);
  }
  .btnLogin {
    border-radius: 100px;
    background: linear-gradient(#65a3ff, #307ffd);
    margin-top: 50px;
  }
  .Input {
    border-bottom: #b8b8b8 1px solid;
  }
}
</style>
